import React from 'react';
import { PageHeader, Menu, Dropdown, Icon, Button, Tag, Typography, Row,Card } from 'antd';
import AllCapabilitiesProvidedPageHeader from './components/all-capabilities-provided-page-header';
import MultiFormPageHeader from './components/multi-form-pageHeader';
import ResponsiveFormulaPageHeader from './components/responsive-formula-page-header';
export default class KimMenu extends React.Component {
  state = { current: 3, }

  render() {
    const routes = [
      {
        path: 'index',
        breadcrumbName: 'First-level Menu',
      },
      {
        path: 'first',
        breadcrumbName: 'Second-level Menu',
      },
      {
        path: 'second',
        breadcrumbName: 'Third-level Menu',
      },
    ]
    
    return (
      <>
      <Card title='标准页头，适合使用在需要简单描述的场景' style={{marginTop:10}}>
        <PageHeader onBack={() => null} title="Title" subTitle="This is a subtitle" />
      </Card>
      
      <Card title='带面包屑页头，适合层级比较深的页面，让用户可以快速导航' style={{marginTop:10}}>
         <PageHeader title="Title" breadcrumb={{ routes }} subTitle="This is a subtitle" />
      </Card>

      <Card title='组合示例，使用了 pageHeader 提供的所有能力' style={{marginTop:10}}>
          <AllCapabilitiesProvidedPageHeader />
      </Card>

      <Card title='多种形态的 PageHeader' style={{marginTop:10}}>
          <MultiFormPageHeader />
      </Card>

      <Card title='响应式，在不同大小的屏幕下，应该有不同的表现' style={{marginTop:10}}>
          <ResponsiveFormulaPageHeader />
      </Card>
      </>
     
    );
  }
}


// API#
// 参数	             说明	类型	默认值	版本
// title	          自定义标题文字	ReactNode	-	3.14.0
// subTitle	        自定义的二级标题文字	ReactNode	-	3.14.0
// ghost	          pageHeader 的类型，将会改变背景颜色	boolean	true	3.24.0
// avatar	          标题栏旁的头像	avatar props	-	3.22.0
// backIcon	        自定义 back icon ，如果为 false 不渲染 back icon	ReactNode	<Icon type="arrow-left" />	3.14.0
// tags	            title 旁的 tag 列表	Tag[] | Tag	-	3.14.0
// extra	          操作区，位于 title 行的行尾	ReactNode	-	3.14.0
// breadcrumb	      面包屑的配置	breadcrumb	-	3.14.0
// footer	          PageHeader 的页脚，一般用于渲染 TabBar	ReactNode	-	3.14.0
// onBack	          返回按钮的点击事件	()=>void	()=>history.back()	3.14.0

